<template>
  <el-dialog :title="title" :visible.sync="openGraph" width="800px" append-to-body>


    <el-row>
      <el-col :span="9" style="text-align:center">
       <div>
          <span>IP:</span>
        <el-input v-model="hostIp"  size="mini" style="width: 200px" readonly />
          </div>
      </el-col>
      <el-col :span="9" style="text-align:center">
        <div>
         <span>日期:</span>
          <el-date-picker v-model="graphDate" type="date" size="mini" placeholder="选择日期" @input="handleQuery" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" style="text-align:center">
        <div >
          <el-button  type="primary"  size="mini" @click="handleQuery">查询</el-button>
          <el-button  size="mini" @click="close">关闭</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>


  </el-dialog>
</template>

<script>
  import {
    getHostDetail
  } from "@/api/devops/host";
  import {
    getCpuLogGraph
  } from "@/api/devops/cpuLog";


  import LineChart from '@/views/components/LineChart.vue'
  export default {
    name: "HostDetail",
    components: {
      LineChart
    },
    props: ['id,title'],
    data() {
      return {
        // 服务器信息
        host: [],
        openGraph: false,
        title:"",
        hostIp: '',
        lineChartData: {
          xAxisData: [],
          seriesData1: [],
          seriesName1:'CPU使用率',
          yAxisUnit:"%",
          yAxisMax:100,
        },
        graphDate: '',
        // 查询参数
        queryParams: {
          id: 0,
          dt: ""
        },
      };
    },
    created() {

     },
    methods: {
      getGraph() {
        this.loading = true;
        getCpuLogGraph(this.queryParams).then(response => {
          this.lineChartData.seriesData1 = response.data.cpuGraph;
          this.lineChartData.xAxisData = response.data.xAxis;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.dt = this.graphDate;
          this.getGraph();

      },
      // 打开加载层
      open() {
        this.openGraph = true;
        var now = new Date();
        var year  = now.getFullYear();
        var month = now.getMonth()+1;
        var day = now.getDate();
        this.graphDate  = year+"-"+month+"-"+day;
        this.queryParams.dt = this.graphDate;
        this.getGraph();
      },
      // 打开加载层
      close() {
        this.openGraph = false;
      }
    }
  };
</script>
